<apes-list apesItemLayout="horizontal">
  <apes-list-item [apesActions]="[passwordOp]">
    <ng-template #passwordOp>
      <!--<a (click)="msg.error('暂未开放')">修改</a>-->
    </ng-template>
    <apes-list-item-meta [apesTitle]="'修改账户密码'" [apesDescription]="passwordDesc">
      <ng-template #passwordDesc>

        <!--当前密码强度：<span class="text-green">强</span>-->

        <form apes-form [formGroup]="form" (ngSubmit)="changePassword()" role="form">

          <div apes-row>

            <div apes-col [apesMd]="10">
              <apes-form-item>
                <apes-form-label apes-col [apesMd]="6">输入新密码</apes-form-label>
                <apes-form-control apes-col [apesMd]="17">
                  <apes-input-group [apesSuffix]="passwordTemplate">
                    <input [type]="passwordVisible ? 'text' : 'password'" apes-input formControlName="password"
                           placeholder="请输入6 - 16 位密码，需字母加数字组合，并区分大小写"/>
                  </apes-input-group>
                  <ng-template #passwordTemplate>
                    <i apes-icon [apesType]="passwordVisible ? 'eye' : 'eye-invisible'"
                       (click)="passwordVisible = !passwordVisible"></i>
                  </ng-template>
                  <apes-form-explain *ngIf="password.dirty && password.errors">请输入6-16位密码,且为字母加数字组合</apes-form-explain>

                </apes-form-control>
              </apes-form-item>
            </div>
          </div>

          <div apes-row>
            <div apes-col [apesMd]="10">
              <apes-form-item>
                <apes-form-label apes-col [apesMd]="6">再次输入密码</apes-form-label>
                <apes-form-control apes-col [apesMd]="17">
                  <apes-input-group [apesSuffix]="checkPasswordTemplate">
                    <input [type]="checkPasswordVisible ? 'text' : 'password'" apes-input
                           formControlName="checkPassword" placeholder="确认密码"/>
                  </apes-input-group>
                  <ng-template #checkPasswordTemplate>
                    <i apes-icon [apesType]="checkPasswordVisible ? 'eye' : 'eye-invisible'"
                       (click)="checkPasswordVisible = !checkPasswordVisible"></i>
                  </ng-template>
                  <apes-form-explain *ngIf="checkPassword.required">请再次输入密码</apes-form-explain>
                  <apes-form-explain *ngIf="checkPassword.dirty && checkPassword.errors">与新密码不一致</apes-form-explain>
                </apes-form-control>
              </apes-form-item>
            </div>
          </div>

          <div apes-row>
            <div apes-col [apesMd]="10">
              <apes-form-item>
                <apes-form-label apes-col [apesMd]="6">手机号</apes-form-label>
                <apes-form-control apes-col [apesMd]="17">
                  <apes-input-group>
                    <input formControlName="mobile" disabled="true" [ngModel]="_mobile" apes-input
                           (ngModelChange)="mobileChanges(mobile.value)"/>
                  </apes-input-group>
                  <apes-form-explain *ngIf="mobile.dirty && mobile.errors">请输入手机号</apes-form-explain>
                </apes-form-control>
              </apes-form-item>
            </div>
          </div>

          <div apes-row>
            <div apes-col [apesMd]="10">
              <apes-form-item>
                <apes-form-label apes-col [apesMd]="6">验证码</apes-form-label>
                <apes-form-control apes-col [apesMd]="17" [apesValidateStatus]="captcha">
                  <apes-input-group [apesAddOnAfter]="suffixIconButton">
                    <input apes-input formControlName="captcha">
                  </apes-input-group>
                  <ng-template #suffixIconButton>
                    <button apes-button apesType="primary" (click)="getCaptcha()"
                            [disabled]="mobileNumber ? mobileNumber : count > 0 ? true : false" class="apes-btn__block">
                      {{ count ? '重新发送 '+count+'s' : '获取验证码' }}
                    </button>
                  </ng-template>
                  <apes-form-explain *ngIf="captcha.dirty && captcha.errors">请输入验证码</apes-form-explain>
                </apes-form-control>
              </apes-form-item>
            </div>
          </div>

          <div apes-row>
            <div apes-col [apesMd]="10">
              <apes-form-item>
                <button apes-button
                        apesType="primary"
                        [apesLoading]="false"
                        [disabled]="!form.valid">
                  修改
                </button>
              </apes-form-item>
            </div>
          </div>

        </form>

      </ng-template>
    </apes-list-item-meta>
  </apes-list-item>
  <!--<apes-list-item [apesActions]="[phoneOp]">-->
  <!--<ng-template #phoneOp>-->
  <!--<a (click)="msg.success('Edit')">修改</a>-->
  <!--</ng-template>-->
  <!--<apes-list-item-meta apesTitle="密保手机" [apesDescription]="phoneDesc">-->
  <!--<ng-template #phoneDesc>-->
  <!--已绑定手机：159****2231-->
  <!--</ng-template>-->
  <!--</apes-list-item-meta>-->
  <!--</apes-list-item>-->
  <!--<apes-list-item [apesActions]="[questionOp]">-->
  <!--<ng-template #questionOp>-->
  <!--<a (click)="msg.success('Edit')">修改</a>-->
  <!--</ng-template>-->
  <!--<apes-list-item-meta apesTitle="密保问题" [apesDescription]="questionDesc">-->
  <!--<ng-template #questionDesc>-->
  <!--未设置密保问题，密保问题可有效保护账户安全-->
  <!--</ng-template>-->
  <!--</apes-list-item-meta>-->
  <!--</apes-list-item>-->
  <!--<apes-list-item [apesActions]="[emailOp]">-->
  <!--<ng-template #emailOp>-->
  <!--<a (click)="msg.success('Edit')">修改</a>-->
  <!--</ng-template>-->
  <!--<apes-list-item-meta apesTitle="备用邮箱" [apesDescription]="emailDesc">-->
  <!--<ng-template #emailDesc>-->
  <!--已绑定邮箱：cip*****.com-->
  <!--</ng-template>-->
  <!--</apes-list-item-meta>-->
  <!--</apes-list-item>-->
  <!--<apes-list-item [apesActions]="[mfaOp]">-->
  <!--<ng-template #mfaOp>-->
  <!--<a (click)="msg.success('Edit')">修改</a>-->
  <!--</ng-template>-->
  <!--<apes-list-item-meta apesTitle="MFA 设备" [apesDescription]="mfaDesc">-->
  <!--<ng-template #mfaDesc>-->
  <!--未绑定 MFA 设备，绑定后，可以进行二次确认-->
  <!--</ng-template>-->
  <!--</apes-list-item-meta>-->
  <!--</apes-list-item>-->
</apes-list>
